<template>
  <div id="app">
    <section class="nav" v-if="$route.fullPath!='/login'">
      <div>
        <el-menu
          mode="horizontal"
          :default-active="active"
          router
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item 
            v-for="item in menu"
            :key="item.index"
            :index='item.index'
          >{{item.name}}</el-menu-item>
        </el-menu>
      </div>
      <div class="user-info" >
        <el-button icon="el-icon-user" circle @click="logout"></el-button>
      </div>
    </section>
      <router-view :class="$route.fullPath =='/login'? '': 'body'"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data(){
      return {
        menu:[
          {name: '数据监控', index: '/rtd'},
          {name: '网关配置', index: '/gateway'},
          {name: '用户管理', index: '/user'},
          {name: '运维信息', index: '/prdtInfo'},
        ],
        active: '/gateway'
      }
    },
    mounted(){
      const path = this.$router.history.current.path;
   
    },
    watch: {
      $route: {
        immediate: true,
        handler(route){
          const path = route.fullPath;
          const flag = this.menu.some(item => {return item.index == path})
          if(flag) this.active = path
          else this.active = '/rtd'
        }
      }
    },
    methods:{
      logout(){
        this.$router.push('/login')
      }
    },
  }
</script>

<style lang="scss">
  /* CSS */
  html, body{
    height: 100%;
    width: 100%;
  }
  body{
    margin: 0;
  }
  #app{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;

    .nav{
      height: 60px;
      background: rgb(84, 92, 100);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      top: 0;
      z-index: 1000 ;
      width: 100%;
    }
    .body{
      width: 100%;
      position: absolute;
      top: 60px;
    }

  }

  .color-blue{
    color: #409EFF;

  }
  .color-warning{
      color: #E6A23C;
  }
  .color-danger{
      color: #F56C6C;
  }

  .width-100{
    width: 100%;
  }
</style>
